import React, {useState, useEffect, useRef} from 'react';
import {Text, View, StyleSheet, TouchableOpacity, ScrollView, Image, Alert} from 'react-native';
import {useNavigation, useRoute} from '@react-navigation/native';
import screen from '../../utils/screen';
import Container from '../../components/Container';
import Images from '../../images/images';
import TouchableView from '../../components/touchableView';
import LinkButton from '../../components/linkButton';
import store from 'react-native-simple-store';
import AppStore, {useAppStore} from '../../store/useAppStore';
import BleUtil from '../../utils/bleUtil';
import {useDialog} from '../../components/dialog/useDialog';
import {isIos} from '../../utils/native';
import BleManager from 'react-native-ble-manager';

const DeviceInfo = ()=>{
    const navigation = useNavigation()
    const route = useRoute()
    const dialog = useDialog()

    const {appState:{currentDevice},deleteDevice,updateAppState} = useAppStore()
    const {data} = route.params

    useEffect(()=>{
        navigation.setOptions({
            headerRight:()=>{
                return (
                    <TouchableView
                        style={{paddingHorizontal: screen.PIXEL_30,height:screen.PIXEL_60,justifyContent:'center'}}
                        onPress={onRemoveDevice}
                    >
                        <Text style={{color:'#0D80FC',fontSize:15}}>解绑</Text>
                    </TouchableView>
                )
            }
        })


    },[])

    const onRemoveDevice = ()=>{
        dialog.alert({
            title:'确定删除该设备？',
            button: [
                {
                    text: '确定',
                    onPress: () => {
                        if( currentDevice  &&currentDevice.id === data.id){
                            BleUtil.disconnect(currentDevice.id).then(res=>{
                                updateAppState({currentDevice:null})
                                removeDevice()
                            })

                        }else {
                            removeDevice()
                        }
                    },
                    pressHide: true,
                    tag: 'confirm',
                    onClose: false
                },
                {
                    text: '取消',
                    onPress: () => {

                    },
                    pressHide: true,
                    tag: 'cancel',
                    onClose: false
                },
            ]
        })



    }

    const removeDevice = ()=>{
        if(!isIos() ){
            BleManager.getBondedPeripherals().then((bondedPeripheralsArray) => {
                // Each peripheral in returned array will have id and name properties
                console.log("Bonded peripherals: " , bondedPeripheralsArray);
                const findIndex = bondedPeripheralsArray.findIndex(it=>{
                    return it.id === data.id
                })
                if(findIndex > -1){
                    BleUtil.removeBond(data.id).then(() => {
                        console.log("removeBond success");
                        deleteDevice(data,()=>{
                            navigation.popToTop()
                        })
                    }).catch(() => {
                        console.log("fail to remove the bond");
                    });
                }else{
                    deleteDevice(data,()=>{
                        navigation.popToTop()
                    })
                }
            });


        }else{
            deleteDevice(data,()=>{
                navigation.popToTop()
            })
        }
    }

    return (
        <Container >
            <ScrollView
                contentContainerStyle={{padding:screen.PIXEL_30}}
            >

                <View style={styles.moduleView}>
                    <Text style={styles.title}>终端ID</Text>
                    <Text style={styles.rightText}>{data.id}</Text>
                </View>

                <View style={styles.moduleView}>
                    <Text style={styles.title}>型号</Text>
                    <Text style={styles.rightText}>{data.name}</Text>
                </View>

             {/*   <TouchableView style={styles.moduleView}>
                    <Text style={styles.title}>蓝牙</Text>
                    <Text style={styles.rightText}>{data.ble}</Text>
                </TouchableView>*/}

                <View style={styles.moduleView}>
                    <Text style={styles.title}>固件版本</Text>
                    <Text style={styles.rightText}>{'1.0'}</Text>
                </View>

            </ScrollView>

            <LinkButton
                title={'返回'}
                style={{alignSelf:'center',marginBottom:screen.PIXEL_120}}
                onPress={()=>{
                    navigation.goBack()
                }}
            />

        </Container>
    )
}
export default DeviceInfo
const styles = StyleSheet.create({
    container: {
        flex: 1, justifyContent: 'center', alignItems: 'center'
    },

    rowCenter: {
        flexDirection: 'row', alignItems: "center"
    },
    moduleView: {
        backgroundColor: '#fff', borderRadius: screen.PIXEL_20, height: screen.PIXEL_88,
        paddingHorizontal: screen.PIXEL_30, flexDirection: 'row', alignItems: "center",
        marginTop: screen.PIXEL_40, justifyContent: 'space-between'
    },
    title: {
        color:'#7E8B94',fontSize:13
    },
    rightText:{
        color:'#333',fontSize:13
    }
})
